<template>
    <Popup custom-class="custom-popup" confirmButtonText="下载" cancelButtonText="设为/移出优秀作品" ref="popRef" title="作品详情"
        width="600px" async @confirm="popConfirm" @close="$emit('close')">


        <custom-title title="作品信息" style="margin-bottom: 20px" />

        <el-descriptions class="custom_descriptions" size="large" column="1">
            <el-descriptions-item label="作品预览："><el-image style="width: 100px; height: 100px"
                    :src="props.popContent.image_url" /></el-descriptions-item>

            <el-descriptions-item label="作品id：">
                <span class="custom_text">{{
                    props.popContent.id
                    }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="作品类型：">
                <span class="custom_text"> {{ props.popContent.type === 1 ? "文生图" : "图生图" }}</span>

            </el-descriptions-item>

            <el-descriptions-item label="优秀作品：">
                <span class="custom_text">{{ props.popContent.is_fine ? "是" : "否" }}</span>

            </el-descriptions-item>

            <!-- 创建时间 -->
            <el-descriptions-item label="创建时间：">

                <span class="custom_text">{{ props.popContent.create_time }}</span>
            </el-descriptions-item>
        </el-descriptions>

        <custom-title title="基础参数" style="margin-bottom: 20px" />

        <el-descriptions class="custom_descriptions" size="large" column="1">
            <!-- 描述词 -->
            <el-descriptions-item label="描述词：">
                <span class="custom_text">{{ props.popContent.prompt_desc }}</span>
            </el-descriptions-item>

            <!-- 反向词 -->
            <el-descriptions-item label="反向词：">
                <span class="custom_text">{{ props.popContent.thumbnail ?? '-' }}</span>
            </el-descriptions-item>

            <!-- 图片尺寸 -->
            <el-descriptions-item label="图片尺寸：">
                <el-space>
                    <span style="width: 185px" class="custom_text">{{ props.popContent.scale ?? '-' }}</span>
                    <span style="width: 185px; margin-left: 20px" class="custom_text">{{ props.popContent.quality ?? '-'
                        }}</span>
                </el-space>
            </el-descriptions-item>

            <el-descriptions-item label="主要模型：">
                <el-space>
                    <span style="width: 185px" class="custom_text">{{ props.popContent.model ?? '-' }}</span>
                    <span style="width: 185px; margin-left: 20px" class="custom_text">{{ props.popContent.model ?? '-'
                        }}</span>
                </el-space>
            </el-descriptions-item>

            <!-- 微调模型 -->
            <el-descriptions-item label="微调模型：">
                <span class="custom_text">{{ props.popContent.loras ?? '-' }}</span>
            </el-descriptions-item>


        </el-descriptions>

        <custom-title title="高级参数" style="margin-bottom: 20px" />

        <el-descriptions class="custom_descriptions" size="large" column="1">
            <!-- 描述词 -->
            <el-descriptions-item label="绘画步数：">
                <span class="custom_text">{{ props.popContent.prompt_desc }}</span>
            </el-descriptions-item>

            <!-- 反向词 -->
            <el-descriptions-item label="文本强度：">
                <span class="custom_text">{{ props.popContent.thumbnail ?? '-' }}</span>
            </el-descriptions-item>

            <!-- 图片尺寸 -->
            <el-descriptions-item label="采样模式：">
                <el-space>
                    <span style="width: 185px" class="custom_text">{{ props.popContent.scale ?? '-' }}</span>
                    <span style="width: 185px; margin-left: 20px" class="custom_text">{{ props.popContent.quality ?? '-'
                        }}</span>
                </el-space>
            </el-descriptions-item>

            <el-descriptions-item label="随机种子：">
                <el-space>
                    <span style="width: 185px" class="custom_text">{{ props.popContent.scale ?? '-' }}</span>
                    <span style="width: 185px; margin-left: 20px" class="custom_text">{{ props.popContent.quality ?? '-'
                        }}</span>
                </el-space>
            </el-descriptions-item>


        </el-descriptions>


    </Popup>
</template>

<script setup lang="ts">
import customTitle from "@/components/custom-title/index.vue";
const props = withDefaults(
    defineProps<{
        popContent: object;
    }>(),
    {
        popContent: {},
    }
);

const emit = defineEmits(["close", "submit"]);

//弹框ref
const popRef = shallowRef();

//打开弹框
const open = () => {
    popRef.value.open();
};

const popConfirm = () => {
    // 根据url下载图片
    window.open(props.popContent.image_url);
    emit("submit");
};

defineExpose({ open });
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #cccccc;
    width: 120px;
    height: 120px;
    text-align: center;
    font-family: "Font Awesome 5 Pro Solid", "Font Awesome 5 Pro Regular",
        "Font Awesome 5 Pro", sans-serif;
    font-weight: 900;
}
</style>
